<template>
	<div class="offcicial-notification" :class="{notification: informationValue && !processValue}">
		<div class="offcicial-notification-tabs">
			<div class="tabs-box">
        <i
          class="shu-icon"
        ></i>
				<span
					v-for="(item, index) in tabList"
					:key="index"
					class="tabs-box-item"
					:class="{ 'tab-active': active === item.value }"
					@click="tabClick(item)"
				>
					<span style="font-weight: 800">{{ item.label }}</span>
				</span>
			</div>
			<div class="details-all" @click="toMore">
				{{ $t('pages.home.viewAll', '查看更多') }}
				<i class="low-code iconxiangyou all-icon"></i>
			</div>
		</div>

		<div class="offcicial-notification-details">
			<a-skeleton v-if="getLoading" active :paragraph="{  rows: informationValue && !processValue ? 5 : 3 }" />
			<NoData v-else-if="!detailList.length" class="offcicial-no-data"></NoData>

			<template v-else>
				<Details
					class="notice-details"
					:detail-data="detailList"
					:auto-date="false"
					@handeleDetail="handeleDetail"
				></Details>
			</template>
		</div>
	</div>
</template>

<script lang="ts" setup>
import useDetails from './useDetails'
import { ref, computed } from 'vue'
import Details from '../Details.vue'
import NoData from '@/entry_desktop/components/NoData/NoData.vue'

const { detailList, active, tabClick, toMore, handeleDetail, getLoading,tabList } =
	useDetails()
const props = defineProps({
	processValue: Number,
	informationValue: Number
})

</script>

<style lang="less">
.notification{
	margin-top: 0 !important;
	min-height: 338px;
}
.offcicial-notification {
	border-radius: @rok-border-radius-big;
	width: 340px;
	padding: 10px 24px 14px 24px;
	background: @rok-white-bg;
  opacity: 0.8;
	overflow: hidden;
	&-tabs {
		display: flex;
		position: relative;
		height: 46px;
		.tabs-box {
			display: flex;
			align-items: center;
			flex: 1;
			.tabs-box-item {
				min-width: 40px;
				margin-right: 20px;
				color: @rok-text-color-secondary;
				font-size: @rok-font-size-big;
				font-weight: @rok-font-weight-bold;
				cursor: pointer;
				display: flex;
				flex-direction: column;
				align-items: center;
				&:hover {
					color: @rok-primary-hover-color;
				}
			}
			.tab-active {
				color: @rok-primary-color;
			}
		}
		.tab-icon-xiaolian {
			font-size: 38px;
			height: 10px;
			line-height: 10px;
			margin-top: 3px;
		}
		&-more {
			cursor: pointer;
			font-size: @rok-font-size-base;
			color: #999999;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
	.tab-active {
		color: @rok-primary-color;
	}
	.offcicial-notification-details {
		width: 100%;
    height: 80%;
	}
	.notice-details {
		.details-item {
			height: 52px;
			line-height: 52px;
      display: flex;
      justify-content: space-between;
      .details-item-text{
        width: 224px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: @rok-primary-hover-color;
        }
      }
		}
		.details-item::after {
			height: 0;
		}
	}
	.details-all {
		height: 46px;
		line-height: 46px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #4d78fc;
		font-size: @rok-font-size-base;
		cursor: pointer;
		font-size: @rok-font-size-base;
		.all-icon {
			margin-left: 3px;
		}
		&:hover {
			color: @rok-primary-hover-color;
		}
	}
	.offcicial-no-data {
		padding-bottom: 20px;
	}
}
.details-tooltip {
	height: 22px;
	line-height: 22px;
}

.shu-icon {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #4c78fc;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: 3px;
  &:before {
    content: ''
  }
}
</style>
